<template>
  <div class="container">
    <OrderBar :type="dealMethod" :order="serviceNo"></OrderBar>
    <van-tabs v-if="orderInfo" v-model="active" swipeable>
      <van-tab v-for="(v,i) in tabs" :key="i" :title="v.label" :name="v.value">
        <ServiceOrderInformation v-show="active === 'fwdxx'" :order-info="orderInfo" />
        <ServicePlan v-show="active === 'fwjh'" :order-info="orderInfo" />
        <MaintenanceCosts v-show="active === 'fymx'" :order-info="orderInfo" />
        <ClosingReport v-show="active === 'jabg'" :order-info="orderInfo" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import OrderBar from '../../components/OrderBar'
import ServiceOrderInformation from './ServiceOrderInformation'
import ServicePlan from './ServicePlan'
import ClosingReport from './ClosingReport'
import MaintenanceCosts from './MaintenanceCosts'
import { urlParams } from '@/assets/utils'

export default {
  components: { OrderBar, ServiceOrderInformation, ServicePlan, ClosingReport, MaintenanceCosts },
  data() {
    return {
      active: localStorage.getItem('active') || 'fwdxx',
      tabs: [
        { label: '服务单信息', value: 'fwdxx' },
        { label: '服务计划', value: 'fwjh' },
        { label: '维修费用', value: 'fymx' },
        { label: '结案报告', value: 'jabg' },
      ],

      saleServiceId: urlParams.get('saleServiceId'),
      serviceNo: urlParams.get('serviceNo'),

      orderInfo: null,

      dealMethodList: [],
    }
  },
  computed: {
    dealMethod() {
      const obj = this.dealMethodList.find(e => e.value = this.orderInfo?.dealMethod)
      return obj?.name || ''
    },
  },
  watch: {
    active() {
      localStorage.setItem('active', this.active)
    },
  },
  created() {
    this.init()
  },
  mounted() {
  },
  methods: {
    init() {
      this.getDetail()
      this.getDealMethodList()
    },

    // 单据详情数据查询
    async getDetail() {
      const res = await this.server.get('/saleService/getSaleServiceDetailById', {
        saleServiceId: this.saleServiceId,
      })
      if (res.code === '0') this.orderInfo = res.object
    },
    // 查询处理方式的下拉字典
    async getDealMethodList() {
      const res = await this.server.get('/common/getDictionaryByParentKey', {
        parentKey: 'SaleService_DealMeth',
      })
      if (res.code === '0') {
        this.dealMethodList = res.object
      }
    },

  },
}
</script>

<style lang='less' scoped>
@import "../../assets/var";

.container {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;

  > div {
    width: 100%;
  }
  ::v-deep >.container{
  .safe-margin();
}

  ::v-deep .nodata{
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}
</style>
